<script setup lang="ts">
import comTabbar from '@/components/common/com-tabbar/com-tabbar.vue';
import comIcon from '@/components/common/com-icon/com-icon.vue';
import { getPatientMessageListAPI } from '@/api/message';
import { onMounted, ref, } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
import type { MessageDetail } from '@/types/message';
const show = ref(false)
const list = ref<MessageDetail[]>()
const getPatientMessageListData = async () => {
  let res = await getPatientMessageListAPI()
  if (res.data.code === 10000) {
    if (res.data.data.length > 0) {
      show.value = false
    } else {
      show.value = true
    }
    list.value = res.data.data
  }
}
onMounted(() => {
  getPatientMessageListData()
})
const goChatRoom = (id: string) => {
  router.push(`/chatRoom/${id}`)
}
</script>
<template>
  <div class="box">
    <div class="navigation">
      <div class="message">消息</div>
      <div class="clear">
        <comIcon class="icon" name="icons-home-橡皮擦"></comIcon> <span>清除未读</span>
      </div>
    </div>
    <div class="nomore" v-if="show">
      <comIcon class="nomoreIcon" name="icons-home-暂无内容"></comIcon>
    </div>
    <div class="list">
      <div class="item" @click="goChatRoom(item.orderId)" v-for="item in list">
        <div class="imgBox">
          <div class="imgPox">
            <img :src="item.avatar" alt="">
            <div class="dian" v-if="item.unreadCount !== 0">{{ item.unreadCount }}</div>
          </div>
        </div>
        <div class="right">
          <div class="top">
            {{ item.title }}
          </div>
          <div class="bottom">
            {{ item.lastContent }}
          </div>
        </div>
        <div class="time">
          {{ item.sendTime }}
        </div>
      </div>
    </div>
  </div>
  <comTabbar></comTabbar>
</template>
<style lang="scss" scoped>
.box {
  padding: 0 15px;

  .navigation {
    display: flex;
    height: 44px;
    align-items: center;
    justify-content: space-between;

    .message {
      font-size: 20px;
    }

    .clear {
      color: #c3c3c5;
      height: 100%;
      display: flex;
      align-items: center;

      .icon {
        width: 16px;
        height: 16px;
        margin-right: 6px;
      }
    }
  }

  .nomore {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 150px;
    margin-top: 60px;

    .nomoreIcon {
      width: 300px;
      height: 150px;
    }
  }

  .list {
    width: 100%;

    .item {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: space-between;
      height: 75px;
      align-items: center;
      border-bottom: 1px solid hsla(0, 0%, 92.9%, .9);

      .imgBox {
        margin-right: 10px;
        height: 100%;
        display: flex;
        align-items: center;

        .imgPox {
          position: relative;

          img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
          }

          .dian {
            position: absolute;
            right: -2px;
            top: -2px;
            padding: 1px 4px;
            border-radius: 50%;
            background-color: red;
            color: #fff;
            text-align: center;
            font-size: 9px;
          }
        }


      }

      .right {
        flex: 1;

        .top {
          font-size: 15px;
          margin-bottom: 5px;
        }

        .bottom {
          font-size: 12px;
          color: #979797;
        }
      }

      .time {
        position: absolute;
        right: 0px;
        top: 15px;
        font-size: 10px;
        color: #c3c3c5;
      }
    }
  }

}
</style>
